<template>
  <q-header reveal class="main-header" >
    <q-toolbar>
      <q-btn flat @click="useHeader.update()" round dense icon="menu" />
      <q-toolbar-title>
        <div class="cursor-pointer" style="width: 280px;" @click="$router.push({'name': 'home'})">
          Digital Management System
        </div>
      </q-toolbar-title>
      <div class="q-px-lg">
        {{ userStore.username }}
      </div>
      <div class="time">
        <system-clock date time></system-clock>
      </div>
    </q-toolbar>
  </q-header>

  <q-drawer
    overlay
    v-model="useHeader.showDrawer"
    :width="getWidth()"
    :breakpoint="1024"
    bordered
    style="background: linear-gradient(170.04deg, #FFFFFF 5.35%, #F1F5FF 70.42%, #D3E0FF 96.94%);"
    behavior="mobile"
  >

      <MenuBar />
  </q-drawer>
</template>

<script setup lang="ts">
import MenuBar from 'src/components/MenuBar.vue'
import systemClock from 'src/components/SystemClock.vue'
import { useHeaderStore } from 'src/stores/headerStore';
import { useUser } from 'src/stores/userStore';


const userStore = useUser()
const useHeader = useHeaderStore()

function getWidth(){
  console.log(window.innerWidth);
    if (/Android/i.test(navigator.userAgent)) {
      return window.innerWidth
  } else if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    return window.innerWidth
  } else {
    return window.innerWidth/2
  }
 
}
</script>

<style scoped scss>
.pro-name {
  font-size: 1.2rem;
  text-align: left;
  margin-left: 1rem;
  background-color: #ffffff;
}
.time {
  font-size: 0.7rem;
}

.alignment{
  display: flex;
  flex-direction: column;
}

.main-header{
  border-radius: 0 0 15px 15px;
  background: linear-gradient(90.11deg, #5868F6 3.99%, #2631AC 95.18%);
  box-shadow: 2px 5px 22px 0px #00000059;

}

</style>
